import { makeObservable } from "mobx";
import { Component } from "@/types/drag";
import { useState } from "react";

class componentStore {
 curComponent:Component | null | undefined =null; //已选中的组件
  curComponentIndex:number | null = null; //已选中的组件序号
  // 点击画布时是否点中组件，主要用于取消选中组件用。
  // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
  isClickComponent = false;
  //画布组件数据
  componentData:Component[] = [];
  //   画布数据
  canvasStyleData = {
    // 页面全局数据
    width: 1200,
    height: 740,
    scale: 100,
    color: "#000",
    opacity: 1,
    background: "#fff",
    fontSize: 14,
  }
  constructor() {
    makeObservable(this);
  }
    /**
   * @函数功能: 将组件数据获取添加到画布
   * @param {any} component
   * @param {any} index
   * @出口参数:
   * @函数备注:
   */
     addComponent(component: any, index: any = undefined) {
        if (index !== undefined) {
          this.componentData.splice(index, 0, component as any);
        } else {
          this.componentData.push(component as any);
        }
      }
        /**
   * @函数功能: 修改对象css样式
   * @param {any} 要修改的对象
   * @param {any} 具体属性值
   * @出口参数:
   * @函数备注:
   */
 setShapeStyle({ top, left, width, height, rotate }: any) {
    if (this.curComponent) {
      if (top !== undefined && this.curComponent)
        this.curComponent.style.top = Math.round(top)
      if (left !== undefined && this.curComponent)
        this.curComponent.style.left = Math.round(left)
      if (width && this.curComponent)
        this.curComponent.style.width = Math.round(width)
      if (height && this.curComponent)
        this.curComponent.style.height = Math.round(height)
      if (rotate && this.curComponent) {
        this.curComponent.style.rotate = this.reSetRotate(Math.round(rotate))
      }
    }
  }
    /**
   * @函数功能: 处理角度大于360或者小于0的情况
   * @param {number} 度数
   * @出口参数:
   * @函数备注:
   */
     reSetRotate(num: number) {
      if (num < 0 || num > 360) {
        if (num < 0) {
          num = this.reSetRotate(num + 360)
        }
        if (num > 360) {
          num = this.reSetRotate(num - 360)
        }
      }
      return num
    }
}

export default componentStore;
